<template>
    <div class="shopListContainer">
        <!-- 跑马灯 -->
        <van-notice-bar
            text="年年不忘品，岁岁故人来，品味天下，尽在雍唐。点击参与最新试吃活动"
            left-icon="volume-o"
            mode="closeable"
        />
        <!-- shoplist -->
        <h4 class="shopListitle">推荐商家</h4>
        <van-tabs v-model="active" sticky animated @click="onClick">
            <van-tab>
                <div slot="title">综合排行<van-icon name="arrow-down" /></div>
                <shopListBody ref="shopListBody1"></shopListBody>
            </van-tab>
            <van-tab  title="销量最高">
                <shopListBody ref="shopListBody2"></shopListBody>
            </van-tab>
            <van-tab  title="距离最近">
                <shopListBody ref="shopListBody3"></shopListBody>
            </van-tab>
            <van-tab>
                <div slot="title">筛选<van-icon name="filter-o" /></div>
                <shopListBody ref="shopListBody4"></shopListBody>
            </van-tab>
        </van-tabs>
        <!-- dialog -->
        <van-dialog
            v-model="show"
            show-cancel-button
            confirm-button-text="完成"
            confirm-button-color="#00d762"
            cancel-button-text="清除筛选"
            lock-scroll
            :before-close="filter"
        >
            <div class="filtrate">
                <div class="filtitle">商家特色</div>
                <van-row gutter="20" class="row">
                    <van-col span="8" v-for="(item, index) in filterList" :key="index" :class="{current : current == item}" @click.native="add(item)">{{item}}</van-col>
                </van-row>
            </div>
        </van-dialog>

    </div>
</template>

<script>
import { Toast } from 'vant';
import { apiGetFilter } from '../../api/index'
import shopListBody from './shopListBody'
export default {
    data() {
        return {
            active: 0,
            categoryList: [],
            show: false,
            filterList: ['免配送费', '0元起送', '新商家', '点评高分', '品牌商家', '首单立减'],
            current: ''
        }
    },
    components: {
        shopListBody
    },
    methods: {
        onClick(index, title) {
            switch (index) {
                case 1:
                    Toast.loading({
                        mask: true,
                        message: '加载中...',
                        duration: 1,
                        onClose: () => {
                            this.$refs.shopListBody2.getTopSelling()
                        }
                    })
                    break;
                case 2:
                    Toast.loading({
                        mask: true,
                        message: '加载中...',
                        duration: 1,
                        onClose: () => {
                            this.$refs.shopListBody3.getGetSDistance()      
                        }
                    })
                    break;
                case 3:
                    this.show = true
                    break;
            }
        },
        // 最终选中
        filter(action, done) {
            Toast.loading({
                mask: true,
                message: '加载中...',
                duration: 1,
                onClose: () => {
                    apiGetFilter(this.current)
                    .then(res => {
                        this.$refs.shopListBody4.list = res.data.data.result
                    })
                    .catch(err => {
                        console.log(err);
                    })
                }
            })
            done() 
        },
        // 选中
        add(name) {            
            this.current = name;   
        }
    }
}
</script>

<style lang="less" scoped>
    .shopListContainer {
        margin-top: 46px;
        margin-bottom: 50px;
        .shopListitle {
            display: flex;
            margin: 8px;
            justify-content: center;
            align-items: center;
            font-weight: 400;
            color: #000;
            &::before,
            &::after {
                display: block;
                content: "";
                width: 5.333333vw;
                height: .266667vw;
                background-color: #999;
            }
            &::before {
                margin-right: 3.466667vw;
            }
            &::after {
                margin-left: 3.466667vw;
            }
        }
        .filtrate {
            .filtitle {
                margin: 1vh 3vw;
                color: #999;
            }
            .row {
                div {
                    margin: 1vh 0;
                    color: #333;
                    font-size: 14px;
                    text-align: center;
                    background: #f1f4f8;
                    line-height: 5vh;
                    background-clip: content-box;
                }
                .current {
                    background: #fd7522;
                    background-clip: content-box;
                    color: #fff;
                }
            }
        }
    }
</style>
